<template>
    <div class="box">
        <div class="title">点赞二级评论</div>
        <div class="search">
            <div class="search-input">
                <el-input
                placeholder="输入用户信息"
                v-model="input"
                clearable
                @keydown.enter="searchArt"
                />
            </div>
            <div class="search-search">
                <el-button type="primary" @click="searchArt">搜索</el-button>
            </div>
        </div>
        <div class="body">
            <ul>
                <li>
                    <div>用户昵称</div>
                    <div>题目内容</div>
                    <div>笔记内容</div>
                    <div>创建时间</div>
                    <div>待定</div>
                    <div>操作</div>
                </li>
                <li v-for="(item,index) of 10" :key="index">
                    <div>&nbsp;{{ item.userId }}</div>
                    <div>&nbsp;{{ item.topicId }}</div>
                    <div>&nbsp;{{ item.nodeContent }}</div>
                    <div>&nbsp;{{ item.createTime }}</div>
                    <div>&nbsp;{{  }}</div>
                    <div><el-button type="warning" disabled>修改</el-button>
                        <el-button type="danger" disabled>删除</el-button></div>
                </li>
            </ul>
        </div>
        <div class="pagination">
            <el-pagination
                background
                layout="prev, pager, next"
                :total="allPages"
                @current-change="getPageNum"
                @prev-click="getPageNum"
                @next-click="getPageNum"
            />
        </div>
    </div>
</template>

<script>

// import { getAllNotes } from '@/api/secondary_api/PageUserNote'

export default {
  data(){
    return{
      commentList:[],//一页用户
      pageNum:1,//当前页
      pageSize:10,//每页显示的条数
      allPages:0//一共多少页
    }
  },
  methods:{
    // getAllNote(){
    //   getAllNotes().then(
    //     response=>{
    //       this.commentList = response.data
    //       if(response.data.length%10 == 0){
    //         this.allPages  = response.data.length/10
    //       }else{
    //         this.allPages = parseInt(response.data.length/10)+1
    //       }
    //   })
    // },
  },
  mounted(){
    // this.getAllNote()
  },
}
</script>

<style scoped>
.box{
  width: 100%;
  height: 100%;
  padding: 2% 4%;
  box-sizing: border-box;
}
.title{
  width: 100%;
  height: 50px;
  font-size: 20px;
  font-weight: bold;
}
.search{
  width: 100%;
  height: 60px;
  line-height: 30px;
}
.search-input{
  width: 30%;
  height: 100%;
  float: left;
}
.search-search{
  width: 10%;
  height: 100%;
  float: left;
  margin-left: 20px;
}
.search-input .el-input{
  height: 70% !important;
  font-size: 17px;
}
.search-search .el-button{
  width: 90%;
  height:70%;
  font-size: 14px;
}
.body{
  width: 100%;
  height: 73%;
  box-sizing: border-box;
  border: 1px solid #ccc;
}
li{
  list-style: none;
}
.body>ul{
  width: 100%;
  height: 100%;
}
.body>ul>li{
  width: 100%;
  height: 8.97% !important;
}
.body>ul>li>div{
  width: 16.5%;
  float: left;
  height: 100%;
  line-height:50px;
  box-sizing: border-box;
}
.body>ul>li>div:last-of-type{
  text-align: center;
}
.body>ul>li>div:nth-of-type(1)~div{
  border-left: 1px solid #ccc;
}
.body>ul>li>div{
  padding-left: 10px;
}
.body>ul>li>div{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.body>ul>li:first-of-type{
  background-color: #eee;
}
.body>ul>li:nth-of-type(1)~li{
  width: 100%;
  border-bottom: 1px solid #ccc;
}
.body>ul>li:nth-of-type(11){
  border-style: hidden !important;
}

.body>ul>li .el-button:nth-of-type(1){
  background-color: #ffb800;
  width: 60px;
  height: 30px;
}
.body>ul>li .el-button:nth-of-type(1):hover,.body>ul>li .el-button:nth-of-type(2):hover{
  opacity: 0.4;
}
.body>ul>li .el-button:nth-of-type(2){
  background-color: red;
  width: 60px;
  height: 30px;
}
.pagination{
  width: 100%;
  margin-top: 20px;
}
</style>